<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../asset/jquery-easyui-1.5.5.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../asset/jquery-easyui-1.5.5.2/themes/icon.css">
    <script type="text/javascript" src="../../asset/jquery-easyui-1.5.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../asset/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../asset/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function () {
            // 数据
            var treeData = [{
                text: "系统管理",
                children: [{
                    text: "用户信息管理",
                    attributes: {
                        url: "UserJump.action"
                    }
                }, {
                    text: "文章信息管理",
                    attributes: {
                        url: "ArticleJump.action"
                    }
                },{
                    text: "留言信息管理",
                    attributes: {
                        url: "MessageJump.action"
                    }
                }]
            }];

            // 实例化树菜单
            $("#tree").tree({
                data: treeData,
                lines: true,
                onClick: function (node) {
                    if (node.attributes) {
                        openTab(node.text, node.attributes.url);
                    }
                }
            });

            // 新增Tab
            function openTab(text, url) {
                if ($("#tabs").tabs('exists', text)) {
                    $("#tabs").tabs('select', text);
                } else {
                    var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src=" + url + "></iframe>";
                    $("#tabs").tabs('add', {
                        title: text,
                        closable: true,
                        content: content
                    });
                }
            }
        });
    </script>
</head>
<body class="easyui-layout">
<div region="north" style="height: 70px;background-color: #E0EDFF">
    <div align="left" style="width: 80%;float: left"><img src="../../asset/img/logo.png"></div>
    <div align="right">
        <a href="../../index.html" class="easyui-linkbutton" iconCls="icon-cancel" style="margin-top: 15px;margin-right: 20px">退出登录</a>
    </div>
</div>
<div region="center">
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
        <div title="首页">
            <div align="center" style="padding-top: 100px;"><font color="red" size="10">欢迎使用</font></div>
        </div>
    </div>
</div>
<div region="west" style="width: 150px;" title="导航菜单" split="true">
    <ul id="tree"></ul>
</div>
<div region="south" style="height: 25px;" align="center">版权所有<a href="#">Gabriel</a>
</div>
</body>
</html>